class Detail {
    constructor() {
        //图片放大
        this.imgBig();
        this.checkLogin();
        //获取商品详细信息
        this.getGoods();
        //更改商品数量
        this.changeNum();
        //加入购物车
        this.$('.addCar').addEventListener('click', this.addCart);
    }
    async getGoods() {
        let goodsId = localStorage.getItem('goodsId');
        let largImg = document.querySelector('.bigimg');
        // console.log(largImg);
        // let userId = localStorage.getItem('user_id');
        // console.log(userId);
        axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');
        let { data } = await axios.get('http://localhost:8888/goods/item?id=' + goodsId);
        // console.log(data);
        //将商品渲染到页面中
        let html1 = `<img src="${data.info.img_big_logo}" width="100%" alt="">`;
        this.$('.smallImg').innerHTML = html1;
        largImg.src = `${data.info.img_big_logo}`;
        let html2 = `${data.info.title}`
        this.$('.sku_name').innerHTML = html2;
        let html3 = `${data.info.current_price}`
        this.$('.price').innerHTML = html3;
        let html4 = `${data.info.category}`
        this.$('.crumb_wrap').innerHTML = html4;
    }
    //更改商品数量
    changeNum() {
        let goodsNum = document.querySelector('.choose_amount input')
        let reduce = document.querySelector('.reduce');
        let add = document.querySelector('.add');
        // console.log(goodsNum.value, mins, plus);
        reduce.onclick = function () {
            goodsNum.value--;
            if (goodsNum.value <= 1) {
                goodsNum.value = 1;
            }
        }
        add.onclick = function () {
            goodsNum.value++;
        }
    }
    //加入购物车
    addCart = () => {
        //将数量加入 
        let num = this.$('.choose_amount input').value;
        // localStorage.setItem('goodnum', num);
        //判断是否有token
        let token = localStorage.getItem('token');
        if (!token) location.href = './login.html';
        //将购买商品加入购物车
        let goodsId = localStorage.getItem('goodsId')
        // console.log(goodsId);
        let userId = localStorage.getItem('user_id');
        let param = `id=${userId}&goodsId=${goodsId}`;
        console.log(param);
        //商品id
        // console.log(userId, goodsId);
        // 设置编码方式
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        axios.defaults.headers.common['Authorization'] = token;
        axios.post('http://localhost:8888/cart/add', param).then(res => {
            let { status, data } = res;
            //status 200请求服务器成功   code 1 接口成功
            // 判断服务器状态
            console.log(data);
            if (status != 200) return;
            if (data.code == 0) location.href = './login.html'
            layer.confirm('是否去购物车结算', {
                btn: ['是', '否'] //按钮
            }, function () {
                // layer.msg('的确很重要', { icon: 1 });
                location.href = `./cart.html?${num}`;
            }, function () {

            });
        });
    }
    imgBig() {
        //小黄快
        let mask = document.querySelector('.mask');
        //小图
        let imgBox = document.querySelector('.preview_img');
        //大图盒子
        let bigObj = document.querySelector('.big');
        //大图
        let bigImg = document.querySelector('.bigimg');
        // console.log(bigImg);
        //移入显示
        imgBox.onmouseover = function () {
            mask.style.display = 'block';
            bigObj.style.display = 'block';
        }
        imgBox.onmouseout = function () {
            mask.style.display = 'none';
            bigObj.style.display = 'none';
        }
        //方块跟着鼠标移动
        imgBox.onmousemove = function (eve) {
            var mouseX = eve.pageX;
            var mouseY = eve.pageY;
            var imgposL = imgBox.offsetLeft;
            var imgposT = imgBox.offsetTop;
            // console.log(mouseX, mouseY);
            // console.log(imgposL, imgposT);
            var maskW = mask.offsetWidth;
            var maskH = mask.offsetHeight;
            // 最后计算的距离就是小黄块，相对于图的
            var tmpX = mouseX - imgposL - maskW / 2;
            var tmpY = mouseY - imgposT - maskH / 2;
            // 设置目标距离
            var targetX = imgBox.offsetWidth - maskW;
            var targetY = imgBox.offsetHeight - maskH;
            // console.log(targetX, targetY);
            // 判断是否到达最大距离
            if (tmpX > targetX) tmpX = targetX;
            if (tmpY > targetY) tmpY = targetY;

            if (tmpX < 0) tmpX = 0;
            if (tmpY < 0) tmpY = 0;

            mask.style.left = tmpX + 'px';
            mask.style.top = tmpY + 'px';
            //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
            var bigTargetX = bigImg.offsetWidth - bigObj.offsetWidth;
            var bigTargetY = bigImg.offsetHeight - bigObj.offsetHeight;
            var bigX = tmpX / targetX * bigTargetX;
            var bigY = tmpY / targetY * bigTargetY;
            // 设置最终大图位置
            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';
        }
    }
    //验证是否登录
    checkLogin() {
        const TOKEN = localStorage.getItem('token');
        if (!TOKEN) location.assign('./login.html');
        let userName = localStorage.getItem('userName')
        let Name = document.querySelector('.fr li');
        if (TOKEN) {
            Name.firstElementChild.innerHTML = userName;
        }
    }
    // 获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res;
    }
}
new Detail;